<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" ref="filters" label-width="80px">

                <el-form-item label="按年份" prop="dateYear">
                    <el-select placeholder="年份" v-model="filters.dateYear" size="18px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>

            </el-form>
        </el-col>


        <el-col :span="24">
            <div class="grid-content">
            </div>
        </el-col>

        <el-col id="el_tab" ref="el_tab" :span="24" style="padding-bottom: 0px; ">
            <div id="inspectChart" ref="inspectChart"></div>

            <!--<el-tabs v-model="currentTab" type="card" @tab-click="handleTabClick">-->
                <!--<el-tab-pane label="隐患数" name="dangerTab">-->
                    <!--<div id="inspectChart" ref="inspectChart"></div>-->
                <!--</el-tab-pane>-->
                <!--<el-tab-pane label="整改率" name="rectifyTab">-->
                    <!--<div id="rectifyChart" ref="rectifyChart"></div>-->
                <!--</el-tab-pane>-->
            <!--</el-tabs>-->
        </el-col>
    </section>
</template>

<script>
    import * as api from '../../api/statistics_api'
    import * as date from "../../common/js/date"
    import dict from '../../common/js/dict';
    // 引入基本模板
    let echarts = require('echarts/lib/echarts');
    //let recharts = require('echarts/lib/echarts');
    // 引入柱状图组件
    require('echarts/lib/chart/bar');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');

    export default {
        data() {
            return {
                inspectChart: null,
                //搜索条件
                filters: {
                    dateYear: ''
                },
                options: {
                    // statistics_order: dict.statistics_order,
                    years: []
                },
                // 隐患数据
                dangerData: {
                    // title: {
                    //     text: '检查项分类：',
                    // },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(a){
                            var rate = a[0]['data'];
                            var count = parseInt(a[0]['seriesName']);
                            count = count == 0 ? 0 : count;
                            rate = count == 0 ? 0 : rate;
                            return (
                                a[0]['name']
                                + '</br>' + a[0]['marker'] + '不合格数: '+ Math.round(rate / 100 * count)
                                + '</br>' + a[0]['marker'] +'百分比: '+ rate + '%');
                        }
                    },
                    grid: {
                        y: 160,         // y轴坐标距title的距离
                        left: '15%',     //距离左边的距离
                        right: '15%',    //距离右边的距离
                        bottom: '8%',   //距离下边的距离
                        top: '12%'      //距离上边的距离
                    },
                    xAxis: {
                        name: '不合格百分比(%)',
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: [{
                        name: '检查项分类',
                        type: 'category',
                        axisLabel: {
                            textStyle: {color: '#000', fontWeight: 'bolder'},
                            interval: 0
                        },
                        data: []
                    }],
                    series: [{
                        name: '不合格数',
                        type: 'bar',
                        barCategoryGap: '50%',
                        data: []
                    }],
                    color: ['#f27161']
                },

                listLoading: false
            };
        },
        methods: {
            handleTabClick(tab, event) {
            },

            // 初始化检查项树
            initInspectItemTree() {
                this.getStatisticsChart();
            },
            getStatisticsChart() {
                if(this.filters.dateYear == ''){
                    let date = new Date();
                    this.filters.dateYear = date.getFullYear() + '';
                }
                let condition = {
                    year: this.filters.dateYear + ""
                };
                // let sort = parseInt(this.filters.sort);

                api.getInspectItemChart(condition).then((res) => {

                    this.dangerData.yAxis[0].data = [];
                    this.dangerData.series[0].data = [];
                    // this.dangerData.title.text = ('检查项分类：0');


                    if (res.data.status == 200) {

                        let data = JSON.parse(res.data.datas);
                        let total = data.count;     //检查项总数
                        let check_item_ones = data.check_item_one;
                        if (check_item_ones && check_item_ones.length > 0) {

                            let height = 40 * check_item_ones.length;
                            if (height > 600 && this.$refs.inspectChart) {

                                this.$refs.inspectChart.style.height = height + 'px';
                            }

                            for (let i = 0; i < check_item_ones.length; i++) {

                                this.dangerData.yAxis[0].data.unshift(check_item_ones[i].no + '.' + check_item_ones[i].check_item_one);
                                var rate = parseFloat((check_item_ones[i].count * 100 / total).toFixed(2));
                                this.dangerData.series[0].data.unshift(rate);
                                // this.dangerData.series[0].name = '不合格数: ' + check_item_ones[i].count + ', 百分比';
                                this.dangerData.series[0].name = total + '百分比';

                            }
                        }
                    } else {
                        if (res.data.status == 401) {
                            // this.$router.push('/login');
                        }
                        this.$message.error(res.data.status + " " + res.data.msg);
                    }

                }).then(() => {

                    this.inspectChart.setOption(this.dangerData);
                    this.inspectChart.resize();
                }).catch((e) => {
                    this.$message({
                        type: 'info',
                        message: e.message
                    });
                });

            },
            drawLine() {
                return new Promise((resolve, reject) => {
                    this.$inspectChart = echarts;
                    // 基于准备好的dom，初始化echarts实例
                    this.inspectChart = this.$inspectChart.init(this.$refs.inspectChart);
                    this.$refs.inspectChart.style.width = this.$refs.el_tab.$el.clientWidth + 'px';
                    resolve();
                });
            },
            //初始化页面
            initData() {
                this.drawLine().then(() => {
                    this.initInspectItemTree();
                });
            },
            initYears() {
                this.currentYear = (new Date()).getFullYear();
                this.filters.dateYear = this.currentYear;

                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();   //初始化页面数据
                this.initYears();  //初始化页面年份
            })

        }
    }
</script>

<style scoped>
    #inspectChart {
        height: 600px;
    }
    .grid-content {
         min-height: 0px !important;
    }
</style>